<template>
  <div class="vet_tabsbar">
    <el-tabs
      v-model="showTab"
      type="card"
      closable
      @tab-click="handleTabClick"
      @tab-remove="handleTabRemove"
    >
      <el-tab-pane
        v-for="item in tabsbarList"
        :key="item.path"
        :name="item.path"
      >
        <template #label>
          <div style="display: inline-block" v-contextMenu="menu">
            <svg-icon
              :name="item.meta.icon"
              :myStyle="{
                position: `relative`,
                top: `5%`,
                tramsform: `translateY(50%)`,
              }"
            />
            {{ item.meta.name }}
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { TabPanelName, TabsPaneContext } from "element-plus";
import {
  defineComponent,
  defineAsyncComponent,
  reactive,
  toRefs,
  watch,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  name: "VetTabsbar",
  components: {
    VetContextMenu: defineAsyncComponent(
      () => import("@/vet/vetContextMenu/index.vue")
    ),
  },
  setup() {
    const store = useStore();

    const router = useRouter();

    const state = reactive({
      contentRef: {} as HTMLElement,
      showTab: "" as string,
      tabsbarList: store.getters["tabsbar/tabsRouter"],
      pathList: [] as Array<string>,
      menu: {
        text: ["a", "b", "c", "d"],
        handler: {
          handlerA() {
            console.log("a");
          },
          handlerB() {
            console.log("b");
          },
          handlerC() {
            console.log("c");
          },
          handlerD() {
            console.log("d");
          },
        },
      },
    });

    watch(
      () => router.currentRoute.value,
      (route) => {
        if (!state.tabsbarList.length) {
          router.getRoutes().forEach((element) => {
            if (element.path === "/") {
              store.dispatch("tabsbar/addTabsRouter", element);
              return;
            }
          });
        }
        store.dispatch("tabsbar/addTabsRouter", route);
        state.showTab = route.path;
      },
      { immediate: true, deep: true }
    );

    /**
     * 监听路由变化
     */
    // onBeforeRouteUpdate((to) => {
    //   console.log("to", to);
    //   if (!state.pathList.includes(to.path as string)) {
    //     state.tabsbarList.push(to);
    //     state.pathList.push(to.path);
    //   }
    //   state.showTab = to.path as string;
    // });

    /**
     * 点击标签
     * @param pane
     * @param ev
     */
    const handleTabClick = (pane: TabsPaneContext, ev: Event) => {
      router.push(state.tabsbarList[parseInt(pane.index as string)].path);
    };

    /**
     * 删除标签
     * @param name
     */
    const handleTabRemove = (name: TabPanelName) => {
      const index = state.pathList.indexOf(name as string);
      state.tabsbarList.splice(index, 1);
      state.pathList.splice(index, 1);
    };

    return {
      ...toRefs(state),
      handleTabClick,
      handleTabRemove,
    };
  },
});
</script>

<style lang="scss" scoped>
.vet_tabsbar {
  display: flex;
  align-content: center;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  user-select: none;

  .el-tabs {
    width: 100%;
    height: 34px;

    :deep(.el-tabs__header) {
      margin: unset;
      border-bottom: none;

      .el-tabs__nav {
        border: none;
      }

      .el-tabs__nav-prev {
        line-height: 34px;
      }

      .el-tabs__nav-next {
        line-height: 34px;
      }

      .el-tabs__item {
        border-bottom: unset;
        border-left: unset;
        margin-right: 5px;
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
        border: solid 1px #dcdfe6;

        &.is-active {
          border: 1px solid #0187fb;
        }
      }
    }
  }
}
</style>